<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>+css页面布局</title>
		<style type="text/css">
			body{margin: 0px;padding: 0px;
			background-color:white;
			}
			#container{
				/*清除外层的float属性*/
				/*float: none;*/
				clear: both;
				/*固定宽度值，防止使用百分比会随窗口变化*/
				width: 800px;
				margin-left: auto;
				margin-right: auto;
			}
			#header{
				width: 100%;
				height: 60px;
				background-color: beige;
				background-image: url(imgs/bg1.jpg);
				background-position: center;
			}
			#center{
				width: 100%;
				/*height: 400px;*/
				
			}
			#footer{
				width: 100%;
				height: 60px;
				background-color: #F5F5DC;
				clear: both;
			}
			#cLeft{
				width: 20%;
				float: left;
				height: 100%;
				background-color: burlywood;
			}
			#cRight{
				width: 80%;
				float: left;
				height: 100%;
				background-color: darkseagreen;
				
			}
			.crows{
				width: 100%;
				clear: both;
				/*text-align: center;*/
				height: 90px;
			}
			.crImg{
				float: left;
				width: 20%;
				margin: 10px;
				
			}
			.crImg img{
				width: 80px;
				height: 80px;
			}
			.crContent{
				float: left;
				width: 30%;
			}
			.crPrice{
				float: left;
				width: 20%;
				margin: 10px;
				padding: 25px;
			}
			.crPrice strong{
				color: #F40;
				font-weight: 700;
				font-family: verdana, arial;
			}
			
		</style>
	</head>
	<body>
		<embed ></embed>
		<!--总范围container-->
		<div id="container">
			<!--header -->
			<div id="header">
				header
			</div>
			<!--center -->
			<div id="center">
				<!--center：left-->
				<div id="cLeft">
					left
				</div>
				<!--center:right-->
				<div id="cRight">
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="imgs/kettle01.jpg"/>
						</div>
						<div id="rowImgContent" class="crContent">
							<p>天天特价小师妹电热水壶烧水壶保温304不锈钢家用大容量自动断电</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>¥99.00</strong>
						</div>
					</div>
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="imgs/kettle02.jpg"/>
						</div>
						<div id="rowImgContent" class="crContent">
							<p>长嘴电热水壶不锈钢家用快速壶泡茶壶煮水壶随手泡烧水壶自动断电</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>¥99.00</strong>
						</div>
					</div>
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="imgs/kettle03.jpg"/>
						</div>
						<div id="rowImgContent" class="crContent">
							<p>SUPOR/苏泊尔 SWF15E19D电热水壶304不锈钢烧水壶电水壶保温正品</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>¥99.00</strong>
						</div>
					</div>
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="imgs/kettle04.jpg"/>
						</div>
						<div id="rowImgContent" class="crContent">
							<p>Chigo/志高 ZD20-708 电热水壶304不锈钢电水壶保温家用烧水壶</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>¥39.00</strong>
						</div>
					</div>
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="imgs/kettle03.jpg"/>
						</div>
						<div id="rowImgContent" class="crContent">
							<p>SUPOR/苏泊尔 SWF15E19D电热水壶304不锈钢烧水壶电水壶保温正品</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>¥99.00</strong>
						</div>
					</div>
				</div>
			</div>
			<!--footer -->
			<div id="footer">
				footer
			</div>
			<!-- -->
			
		</div>
	</body>
</html>
